<template>
	<view class="course-item">
		<navigator class="item" :url="course.url">
			<view class="lefttop">
				3天前更新
			</view>
			<view class="cover">
				<image :src='course.cover' mode="aspectFill"></image>
			</view>
			<view class="title">{{course.title}}</view>
		</navigator>
	</view>
</template>

<script setup>
	defineProps({
		course:{
			
		}
	})
</script>

<style lang="scss" scoped>
	.course-item {
		border-radius: 10rpx;
		overflow: hidden;
		.item {
			width: 330rpx;
			height: 220rpx;
			position: relative;
			.lefttop{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 100;
				padding: 5rpx;
				background: rgba(118, 118, 118, 0.2);
				color: #999;
				display: flex;
				align-items: center;
				justify-content: center;
				backdrop-filter: blur(20rpx);
				border-bottom-right-radius: 10rpx;
			}
			.cover {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.title{
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				background: rgba(118, 118, 118, 0.2);
				color: #999;
				display: flex;
				align-items: center;
				justify-content: center;
				backdrop-filter: blur(20rpx);
				font-weight: 600;
			}
		}
	}
</style>